<template>
    <div :style="{marginTop:$store.state.navbarHeight+6+'px'}">
        <Navbar bgColor="bg-gradual-pink" title="مارس كىنوخانىسى" :showIcon="true" />
        <div class="wrap" :style="{marginTop:customBar()*2+12+'rpx'}">
            <div class="balance">
                <span class="all">
                    <span class="money">{{Number(total.score)}}</span>
                    <span class="txt">جەمئىي جۇغلانما</span>
                </span>
                <!-- <span class="reamain">
                    <span class="money">{{'0'}}￥</span>
                    <span class="txt">قالدۇق جۇغلانما</span>
                </span> -->
            </div>
            <div class="kong"></div>
            <div class="content">
                <div class="top">
                    <span class="txt">مېنىڭ تاپقىنىم</span>
                    <span class="intergal">جۇغلانما
                        <img @click="showNotice=true" src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/why.png" alt="">
                    </span>
                </div>
                <ul>
                    <li v-for="(item,index) in list" :key="index">
                        <span class="money">{{item.intergal}}</span>
                        <span class="time">{{formatDate(item.create_time)}}</span>
                        <span class="user-info">
                            <span class="name">{{item.userInfo.nickName}}</span>
                            <image :src="item.userInfo.avatarUrl"></image>
                        </span>
                    </li>
                </ul>
            </div>
            <div class="share">
                <button class="btn" open-type="share" :data-rid="wo">ھەمبەھىرلىنەي</button>
            </div>
            <div class="notice" @click="showNotice=false" v-if="showNotice">
                {{$store.state.elan.content}}
            </div>
        </div>
    </div>
</template>

<script>
import Navbar from "@/components/Navbar.vue";
import { mapState, mapActions, mapGetters } from "vuex";
import { formatDate } from "@/utils/index";
export default {
    components: {
        Navbar
    },
    data() {
        return {
            userInfo: null,
            list: [],
            total: { score: 0 },
            showNotice: true
        };
    },
    methods: {
        formatDate,
        ...mapGetters(["customBar", "statusBar", "clientRect"]),
        init() {
            let userInfo = wx.getStorageSync("userInfo");
            if (userInfo && userInfo.openId && userInfo.uid) {
                this.userInfo = userInfo;
            } else {
                if (this.$store.state.config.forceLogin) {
                    wx.showToast({
                        title: "ئاۋۋال كىرىڭ", //提示的内容,
                        icon: "none", //图标,
                        duration: 700, //延迟时间,
                        mask: true, //显示透明蒙层，防止触摸穿透,
                        success: res => {}
                    });
                    wx.navigateTo({ url: "/pages/Login/Login" });
                } else {
                }
                // wx.navigateTo({ url: "/pages/Login/Login" });
            }
        },
        async getList() {
            try {
                let res = await this.$http.get(
                    "/mpGetShare?uid=" + this.userInfo.uid
                );
                if (res.code == "001") {
                    this.total = res.total;
                    let newList = null;
                    if (res.list.length) {
                        newList = res.list.map(item => {
                            item.userInfo = JSON.parse(item.user_info);
                            return item;
                        });
                        this.list = newList;
                    }
                }
            } catch (error) {}
        }
    },
    mounted() {
        this.init();
        this.getList();
    },
    onShareAppMessage: function(res) {
        // let { openId } = wx.getStorageSync("userInfo");
        var that = this;
        return {
            title: "مارس كىنوخانىسى ھەقسىز ئالىي ئەزالىق تارقاتتى",
            // 分享时在路径后拼接参数，可拼接多个参数。
            path:
                "/pages/Home/Home?uid=" +
                (this.userInfo ? this.userInfo.uid : 495208),
            imageUrl:
                "https://mars-kino.oss-cn-beijing.aliyuncs.com/static/coverimg.jpg", //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
            success: function(res) {
                // 转发成功
                wx.showToast({
                    title: "转发成功",
                    icon: "success",
                    duration: 2000
                });
            },
            fail: function(res) {
                // 转发失败
                console.log("转发失败");
            }
        };
    }
};
</script>

<style lang="scss" scoped>
.wrap {
    border: 1rpx solid transparent;
    .balance {
        width: 100%;
        height: 200rpx;
        margin-top: 30rpx;
        margin-bottom: 30rpx;
        display: flex;
        justify-content: space-around;
        .all,
        .reamain {
            width: 42%;
            height: 100%;
            // border: 1px solid red;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            text-align: center;
            padding: 25rpx 0;
            box-sizing: border-box;
            .money {
                color: #fe6e5a;
                font-size: 60rpx;
                font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
            }
            .txt {
                color: #ccc;
            }
        }
    }
    .kong {
        width: 100%;
        height: 30rpx;
        background-color: #f8f8f8;
    }
    .content {
        width: 100%;
        .top {
            height: 100rpx;
            border-bottom: 1rpx solid #eee;
            text-align: right;
            color: #fe6e5a;
            .txt {
                float: right;
                widows: 80rpx;
                direction: rtl;
                margin-right: 50rpx;
                padding-top: 17rpx;
                font-size: 30rpx;
                border-bottom: 2rpx solid #fe6e5a;
                padding-bottom: 10rpx;
                ::after {
                    content: "";
                    display: inline-block;
                    clear: both;
                }
            }
            .intergal {
                float: left;
                // display: inline-block;
                line-height: 100rpx;
                padding-left: 20rpx;
                image {
                    width: 30rpx;
                    height: 30rpx;
                    vertical-align: middle;
                }
            }
        }
        ul {
            max-height: 600rpx;
            overflow: hidden;
            overflow-y: scroll;
            li {
                height: 100rpx;
                border-bottom: 1rpx solid #f5f5f5;
                display: flex;
                align-items: center;
                justify-content: space-around;
                padding: 0 35rpx;
                flex: 10;
                .money {
                    color: #fe6e5a;
                    font-size: 30rpx;
                    flex: 2;
                }
                .time {
                    color: #bbbbbb;
                    font-size: 20rpx;
                    flex: 3;
                    text-align: center;
                }
                .user-info {
                    color: #424242;
                    font-size: 30rpx;
                    flex: 5;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    .name {
                        margin-left: 30rpx;
                        text-align: center;
                        width: 60%;
                        line-clamp: 1;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        color: #424242;
                    }
                    image {
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
    .share {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 375rpx;
        background-image: url("https://mars-kino.oss-cn-beijing.aliyuncs.com/static/intergal.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .btn {
            position: absolute;
            bottom: 130rpx;
            height: 75rpx;
            width: 50%;
            background-color: #f6cb47;
            color: #db4c16;
            left: 0;
            right: 0;
            line-height: 75rpx;
            border-radius: 75rpx;
            box-shadow: 0 0 7rpx 5rpx rgba(0, 0, 0, 0.1);
        }
        button:active {
            box-shadow: 0 -3rpx 7rpx 10rpx rgba(0, 0, 0, 0.1);
        }
    }
    .notice {
        position: fixed;
        left: 50%;
        top: 40%;
        width: 500rpx;
        min-height: 300rpx;
        transform: translateX(-50%) translateY(-40%);
        background-color: white;
        z-index: 3;
        border-radius: 20rpx;
        box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.15);
        direction: rtl;
        padding: 20rpx;
        text-indent: 2em;
        color: #999;
        overflow-y: scroll;
    }
}
</style>